<template>
	<view class="body">
		<view class="head" v-if="switchDefaultValue==0">
			<view class="nav">
				堂食点餐
			</view>
			<view class="nav-b">
				<view class="head_l">
					<view @click="dineStore">
						<text>{{shopname}}</text>
						<image
							src="https://cdn3.axureshop.com/demo/2116044/images/%E9%80%89%E6%8B%A9%E9%97%A8%E5%BA%97/u1849.png"
							mode=""></image>
					</view>
					<view>距您1.2km</view>
				</view>
				<view class="head_r">
					<yjy-switch style="width: 160rpx;float:right;" @switchFunction="switchChangeFun"
						:switchType="'text'" :defaultColor="'#fd5c25'" :highColor="'#FFFFFF'"
						:defaultValue="switchDefaultValue" :switchList="switchListText" :itemIndex="0"></yjy-switch>
				</view>
			</view>
		</view>
		<view class="head" v-else-if="switchDefaultValue==1">
			<view class="nav">
				外卖点餐
			</view>
			<view class="nav-b">
				<view class="head_l">
					<view @click="deliveryStore">
						<text>{{shopaddress}}</text>
						<image
							src="https://cdn3.axureshop.com/demo/2116044/images/%E9%80%89%E6%8B%A9%E9%97%A8%E5%BA%97/u1849.png"
							mode=""></image>
					</view>
					<view>
						由<text class="store">{{shopname}}</text>配送
						<text class="change" @click="deliveryStore">更换门店</text>
					</view>
				</view>
				<view class="head_r">
					<yjy-switch style="width: 160rpx;float:right;" @switchFunction="switchChangeFun"
						:switchType="'text'" :defaultColor="'#fd5c25'" :highColor="'#FFFFFF'"
						:defaultValue="switchDefaultValue" :switchList="switchListText" :itemIndex="0"></yjy-switch>
				</view>
			</view>

		</view>

		<view class="main">
			<view class="aside">
				<view @click="setClass(i)" :id="check==i?'bgc':''" v-for="(v,i) in typeList" v-if="i<5">
					<image :src="v.picture" mode=""></image>
					<text>{{v.typeName}}</text>
				</view>
			</view>
			<view class="right">
				<view class="item" v-for="(v,i) in currentList" :key="v.id">
					<view class="item_l" @click="goto(i)">
						<image :src="v.picture" mode=""></image>
					</view>
					<view class="item_r">
						<view>
							{{v.name}}
						</view>
						<view>
							<text>{{v.discount}}折</text>
						</view>
						<view class="item_b">
							<view>
								<text>￥{{v.price}}</text>
								<text>/份</text>
							</view>
							<view class="number">
								<uni-icons @click="del(i,v.id)" type="minus" size="20"></uni-icons>
								<text>{{v.num}}</text>
								<uni-icons @click="add(i,v.id)" type="plus" size="20" color="#f77214"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="settle" v-if="switchDefaultValue==0">
			<view class="settle_l">
				<view @click="open">
					<image
						src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u819.svg"
						mode=""></image>
					<view>{{goodNum}}</view>
				</view>
				<view>¥ {{sum}}</view>
			</view>
			<view @click="goSettle(switchDefaultValue)" class="settle_r">
				去下单
			</view>
		</view>

		<view class="settle" v-else-if="switchDefaultValue==1">
			<view class="settle_l">
				<view @click="open">
					<image
						src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u819.svg"
						mode=""></image>
					<view>{{goodNum}}</view>
				</view>
				<view>¥ {{sum}}</view>
				<view class="fee">
					配送费 ¥{{fee}}
				</view>
			</view>
			<view @click="goSettle(switchDefaultValue)" class="settle_r">
				去下单
			</view>
		</view>

		<uni-popup ref="popup" type="bottom" v-if="orderList.length>0">
			<view class="car">
				<view class="car_t">
					<text>我的购物车({{goodNum}})</text>
					<view @click="empty">
						<image
							src="https://cdn3.axureshop.com/demo/2116044/images/%E5%A0%82%E9%A3%9F%E7%82%B9%E9%A4%90/u2316.png"
							mode=""></image>
						<text>清空</text>
					</view>
				</view>
				<view class="car_lists">
					<view class="car_list" v-for="(v,i) in orderList" :key="v.id">
						<image :src="v.picture" mode=""></image>
						<view>
							<text>{{v.name}}</text>
							<view>
								<text>￥{{v.price}}</text>
								<view class="">
									<uni-icons @click="del(i,v.id)" type="minus" size="20"></uni-icons>
									<text>{{v.num}}</text>
									<uni-icons @click="add(i,v.id)" type="plus" size="20" color="#f77214"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import http from "@/utils/http.js";
	export default {
		data() {
			return {
				// divShow:0,

				status: 1,
				phone: '',
				shopid: '',
				shopname: '',
				shopaddress: '上海市中海大厦（江场三路）',
				// src:'https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u654.png',
				check: 0,
				//设置默认值
				switchDefaultValue: 0,
				//文本switch的可选值，仅支持2个数组
				switchListText: [{
						title: '堂食',
						value: 0
					},
					{
						title: '外卖',
						value: 1
					}
				],
				typeList: [],
				menuList: [],
				currentList: [],
				orderList: [],
				backList: [],
				goodNum: 0, //商品总数
				fee: 3, //配送费
				number: '', //就餐人数
				discount: 0, //折扣
			}
		},
		methods: {
			dineStore() {
				uni.navigateTo({
					url: '' //跳转到堂食地址页面
				})
			},
			deliveryStore() {
				uni.navigateTo({
					url: '' //跳转外卖地址页面
				})
			},
			goSettle(state) { //去下单
				if (this.status == 1) {
					let sendItem = {
						status: state, //堂食为0，外卖为1
						orderList: this.orderList, //购物车列表是个数组
						fee: this.fee, //配送费
						discount: this.discount, //折扣
						number: this.number, //就餐人数
						shopid: this.shopid, //餐厅id
						sum: this.sum, //总金额
						goodNum: this.goodNum //商品数量
					};
					uni.navigateTo({
						url: '/pages/settle/settle?sendItem=' + JSON.stringify(sendItem) //跳转结算页面并传值
					})
				} else {
					uni.navigateTo({
						url: '' //跳转登录页面
					})
				}
			},
			empty() {
				for (let i = 0; i < this.menuList.length; i++) {
					this.menuList[i].num = 0
				}
			},
			backItem(data) {
				console.log('ccc');
				console.log(data);
				this.backList = data;
			},
			goScan() {
				uni.navigateTo({
					// url: '/pages/sweep/sweep'
				})
			},
			goto(i) {
				let menuitem = {
					currentItem: this.currentList[i],
					goodNum: this.goodNum,
					sum: this.sum,
					discount: this.discount,
					orderList: this.orderList,
					state: this.switchDefaultValue,
					fee: this.fee,
					number: this.number,
					shopid: this.shopid
				};
				uni.navigateTo({
					url: '/pages/dishesDetail/dishesDetail?menuitem=' + JSON.stringify(menuitem)

				})
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			//切换事件
			switchChangeFun(e) {
				console.log('触发 switchChangeFun');
				// console.log(e);
				//重新赋值，改变该值用于设置switch默认值
				this.switchDefaultValue = e.swithcSelectItem.value;
				console.log(this.switchDefaultValue);
				if (this.switchDefaultValue == 1) {
					uni.navigateTo({
						url: '/pages/choiceoutshop/choiceoutshop' //外卖地址页面
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/index' //堂食地址页面
					})
				}
			},
			setClass(i) {
				this.check = i;
				let typeId = i + 1;
				this.currentList = [];
				for (let i = 0; i < this.menuList.length; i++) {
					if (this.menuList[i].typeID == typeId) {
						this.currentList.push(this.menuList[i])
					}
				}
			},
			del(i, id) {
				console.log(i, id);
				// let j=this.menuList.indexOf('id');
				// const j = getArrIndex(this.menuList,{id:id});
				let j = this.menuList.findIndex((arr) => arr.id == id);
				console.log(j);
				let _menuList = this.menuList;
				if (_menuList[j].num >= 1) {
					_menuList[j].num--;
				}

			},
			add(i, id) {
				let j = this.menuList.findIndex((arr) => arr.id == id);
				console.log(j);
				let _menuList = this.menuList;
				_menuList[j].num++;
			}
		},
		onShow() {
			//
			this.status = uni.getStorageSync("status");
			this.phone = uni.getStorageSync("phone");
			if (uni.getStorageSync("shopid")) {
				this.shopid = uni.getStorageSync("shopid");
			};
			console.log('shop=' + this.shopid);
			if (uni.getStorageSync("number")) {
				this.number = uni.getStorageSync("number");
			};
			console.log('number=' + this.number);
			// if(uni.getStorageSync("shopname")){
			// 	this.shopname=uni.getStorageSync("shopname");
			// };
			if (uni.getStorageSync("shopaddress")) {
				this.shopaddress = uni.getStorageSync("shopaddress");
			};
			http({
				url: '/type',
				success: (res) => {
					// console.log(res);
					this.typeList = res.data.msg;
				}
			});
			http({
				url: '/menu',
				success: (res) => {
					// console.log(res);
					// console.log(res.data.msg);
					this.menuList = res.data.msg;
					for (let i = 0; i < this.menuList.length; i++) {
						for (let j = 0; j < this.backList.length; j++) {
							if (this.menuList[i].id == this.backList[j].id) {
								this.menuList[i].num = this.backList[j].num
							}
						}
					};
					// console.log(this.menuList);
					for (let i = 0; i < this.menuList.length; i++) {
						if (this.menuList[i].typeID == 1) {
							this.currentList.push(this.menuList[i])
						}
					}
					// console.log(this.currentList);
				}
			});
			http({
				url: '/shopid',
				method: 'post',
				data: {
					shopid: this.shopid
				},
				success: (res) => {
					console.log(res)
					if (res.data) {
						console.log(res.data[0].name);
						this.shopname = res.data[0].name;
					}
				},
			});
		},
		computed: {
			sum() {
				let sum = 0;
				let discount = 0;
				for (let i = 0; i < this.orderList.length; i++) {
					discount += 0.1 * this.orderList[i].discount * this.orderList[i].price * this.orderList[i].num
				}
				for (let i = 0; i < this.menuList.length; i++) {
					sum += this.menuList[i].num * this.menuList[i].price;
				}
				sum = sum - discount;
				return sum;
			}
		},
		watch: {
			menuList: {
				handler: function() {
					console.log('menuList发生变化的时候触发')
					this.orderList = [];
					this.goodNum = 0;
					for (let i = 0; i < this.menuList.length; i++) {
						if (this.menuList[i].num > 0) {
							this.orderList.push(this.menuList[i]);
							this.goodNum += this.menuList[i].num
						}
					}
					console.log(this.orderList);
				},
				deep: true
			}

		},

	}
</script>

<style>
	.body {
		background: #eee;
	}

	.head {
		position: sticky;
		top: 0;
		width: 750rpx;
		height: 130rpx;
		padding: 80rpx 0 20rpx 0;
		background: white;
		z-index: 100;
	}

	.nav {
		width: 750rpx;
		height: 70rpx;
		text-align: center;
	}

	.nav-b {
		display: flex;
		padding: 0 25rpx;
		justify-content: space-between;
	}

	.head .head_r {
		display: flex;
		align-items: center;
	}

	.head .head_r .yjy-switch-container {
		padding: 0
	}

	.head .head_r .yjy-switch-container .yjy-switch-item {
		width: 82rpx;
	}

	.head .head_l view image {
		width: 12rpx;
		height: 20rpx;
		margin-left: 10rpx;
	}

	.head .head_l view:nth-child(1) {
		font-size: 35rpx;
	}

	.head .head_l view:nth-child(2) {
		font-size: 25rpx;
		color: #cccccc;
	}

	.head .head_l .store {
		color: #000;
		margin: 0 10rpx;
	}

	.head .head_l .change {
		color: #F77214;
		margin-left: 10rpx;
	}

	.main {
		display: flex;
		/* padding-top: 105rpx; */
		margin-top: 15rpx;
		/* height: rpx; */
	}

	.main .aside {
		width: 200rpx;
		height: 80vh;
		overflow: auto;
		padding: 10rpx 5rpx 0;
		background: white;
		border-radius: 0 10rpx 0 0;
	}

	.main .aside view {
		height: 72rpx;
		margin-bottom: 30rpx;
		padding: 15rpx 25rpx;
		border-radius: 10px;
		display: flex;
		align-items: center;
	}

	.main .aside view image {
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
	}

	#bgc {
		background: rgba(247, 114, 20, 0.0980392156862745);
	}

	#bgc text {
		color: rgb(247, 114, 20);
		font-weight: bold;
	}

	.main .aside view text {
		color: #999;
		font-size: 28rpx;
		margin-left: 5rpx;
		/* vertical-align: middle; */
	}

	.right {
		width: 550rpx;
		height: 80vh;
		overflow: auto;
		margin-bottom: 113rpx;
	}

	.right .item {
		width: 510rpx;
		height: 200rpx;
		background: white;
		display: flex;
		margin: 0 0 20rpx 20rpx;
		border-radius: 10px;
		/* margin-top: 15rpx; */
	}

	.right .item .item_l image {
		display: block;
		width: 200rpx;
		height: 200rpx;
	}

	.right .item .item_r {
		width: 280rpx;
		height: 170rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 15rpx;
	}

	.right .item .item_r view:nth-child(1) {
		font-size: 30rpx;
	}

	.right .item .item_r>view:nth-child(2) text {
		background: rgba(247, 114, 20, 0.0980392156862745);
		color: #F77214;
		padding: 10rpx;
		font-size: 25rpx;
		text-align: center;
	}

	.right .item .item_r .item_b {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.right .item .item_r .item_b>view:nth-child(1) text {}

	.right .item .item_r .item_b>view:nth-child(1) text:nth-child(1) {
		font-size: 30rpx;
	}

	.right .item .item_r .item_b>view:nth-child(1) text:nth-child(2) {
		font-size: 26rpx;
		color: #999;
	}

	.right .item .item_r .item_b .number {
		display: flex;
		align-items: center;
	}

	/* .right .item .item_r .item_b .number image {
		width: 32rpx;
		height: 32rpx;
		vertical-align: middle;
	} */

	.number input {
		width: 46rpx;
		margin-left: 21rpx;
	}

	.settle {
		position: fixed;
		display: flex;
		/* justify-content: space-between; */
		/* padding: 0 30rpx; */
		width: 700rpx;
		height: 95rpx;
		bottom: 25rpx;
		left: 25rpx;
		border-radius: 47rpx;
		z-index: 100;
		/* margin: 0 auto; */
		/* background: pink; */
	}

	.settle_l {
		display: flex;
		width: 450rpx;
		height: 95rpx;
		background: black;
		padding-left: 50rpx;
		border-radius: 47rpx 0 0 47rpx;
	}

	.settle_l view image {
		width: 48rpx;
		height: 48rpx;
		/* vertical-align: middle; */
	}

	.settle_l view:nth-child(1) {
		position: relative;
		padding: 23rpx 0;

	}

	.settle_l view:nth-child(1) view {
		position: absolute;
		background: white;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		right: -16rpx;
		top: 20rpx;
		font-size: 25rpx;
		text-align: center;
		line-height: 32rpx;
		color: #F77214;
	}

	.settle_l view:nth-child(2) {
		color: white;
		line-height: 95rpx;
		margin-left: 45rpx;
	}

	.settle_l .fee {
		margin-left: 10rpx;
		color: white;
		font-size: 30rpx;
		line-height: 100rpx;

	}

	.settle_r {
		background: rgba(247, 114, 20, 1);
		width: 250rpx;
		border-radius: 0 47rpx 47rpx 0;
		color: white;
		text-align: center;
		line-height: 95rpx;
	}

	.car {
		/* height: 50vh; */
		background: white;
		border-radius: 40rpx 40rpx 0 0;
	}

	.car_t {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.car_t image {
		width: 32rpx;
		height: 32rpx;
		vertical-align: middle;
	}

	.car_t text {
		font-size: 35rpx;
	}

	.car_lists {
		height: 40vh;
		overflow: auto;
		padding-bottom: 130rpx;
	}

	.car_list {
		overflow: auto;
		width: 690rpx;
		display: flex;
		margin: 0 30rpx;
		padding: 30rpx 0;
		border-bottom: 1rpx solid rgba(239, 239, 239, 1);
	}

	.car_list image {
		width: 112rpx;
		height: 112rpx;
		margin-right: 10rpx;
	}

	.car_list>view {
		width: 568rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.car_list text {
		font-size: 35rpx;
	}

	/* .car_list>view>view:nth-child(1){
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
	} */
	.car_list>view>view {
		display: flex;
		justify-content: space-between;
	}

	.car_list>view>view>view {
		display: flex;
	}

	.car_list>view>view>view text {
		margin: 0 20rpx;
	}

	/* .yesno{
		position: fixed;
		right: 0;
		bottom: 0;
		z-index: 100;
		background-color: white;
		padding: 10rpx;
	}
	.yesno view{
		background: #EEE none repeat scroll 0% 0%;
		border: 1px solid #AAA;
		padding:3px 8px 3px 8px
	} */
</style>
